<head>
  <meta name="layout" content="doc3"/>
  <title>完善宝贝资料</title>
  <style>
  .birth input {
    display: none;
  }

  .birth select {
    display: inline;
  }
  h3 label {
    display: inline;
     margin: 0px 0px 7px 10px;
  }
  h3 input {
    display: inline;    
  }
  .baby_form {
    color: #ef575a;
    padding: 0px;
    margin: 50px 0px 50px 20px;
  }

  #pre_pregnant_form, #pregnant_form, #born_form {
    margin: 30px 0px 30px 20px;
    padding:10px;
    border: thick solid yellow; 
  }
  </style>
</head>

<body>
<div id="yui-main">
  <div class="yui-b">
    <div class="yui-g">
      <div class="baby_form">
        <g:if test="${flash.message}">
          <div class="message">${flash.message}</div>
        </g:if>
        <h2>你现在正处于哪个阶段？</h2>
        <h3><input name="select_stage" id="stage1" type="radio" onClick="$('.hidden').hide();$('#pre_pregnant_form').slideToggle('slow')"/><label for="stage1">我正准备怀孕</label></h3>
        <div id="pre_pregnant_form" class="hidden">
          <g:form action="savebaby">
            <p>优生优育从准备怀孕阶段就要开始精心准备了，我们将跟随你的进度，为你提供大量的参考资讯，为你拥有一个聪明可爱的宝贝而一起努力。</p>
            <div class="continue submit">
              <input name="stage" value="0" type="hidden"/>
              <input value="准备怀孕啦 »" tabindex="4" type="submit" class="btnGrey">
            </div>
          </g:form>
        </div>
        <h3><input name="select_stage" id="stage2" type="radio" onClick="$('.hidden').hide();$('#pregnant_form').slideToggle('slow')"><label for="stage2">我正在怀孕中</label></h3>
        <div id="pregnant_form" class="hidden">
          <g:form action="savebaby">
            <fieldset>
              <table>
                <tbody><tr>
                  <td>
                    <div class="birth field">
                      <label>最后一次例假开始时间</label>
                      <g:datePicker id="datePregnant" precision="day" name="datePregnant"  years="${2005..2009}"></g:datePicker>
                    </div>
                    <div class="realName field">
                      <label for="_realName">宝宝大名</label>
                      <input name="realName" id="_realName" value="宝宝" maxlength="50" tabindex="1" type="text">
                      <span class="greyText">名字还没有正式起好？没关系，以后起好后可以再修改。</span>
                    </div>
                    <div class="nickName field">
                      <label for="_nickName">宝宝小名</label>
                      <input name="name" id="_nickName" value="宝宝" maxlength="50" tabindex="1" type="text">
                      <span class="greyText">名字还没有正式起好？没关系，以后起好后可以再修改。</span>
                    </div>                    
                  </td>
                </tr>
                </tbody>
              </table>
            </fieldset>
            <div class="continue submit">
              <input name="stage" value="10000" type="hidden"/>
              <input value="提交 »" tabindex="4" type="submit" class="btnGrey">
            </div>
          </g:form>
        </div>
        <h3><input name="select_stage" id="stage3" type="radio" onClick="$('.hidden').hide();$('#born_form').slideToggle('slow')"><label for="stage3">宝宝已经出生</label></h3>
        <div id="born_form" class="hidden">
          <g:form action="savebaby">
            <fieldset>
              <table>
                <tbody><tr>
                  <td>
                    <div class="realName field">
                      <label for="realName">宝宝大名</label>
                      <input name="realName" id="realName" value="${fieldValue(bean: baby, field: 'realName')}" maxlength="50" tabindex="1" type="text">
                    </div>
                    <div class="nickName field">
                      <label for="nickName">宝宝小名</label>
                      <input name="name" id="nickName" value="${fieldValue(bean: baby, field: 'nickName')}" maxlength="50" tabindex="1" type="text">
                    </div>
                    <div class="birth field">
                      <label>宝宝出生日期</label>
                      <g:datePicker id="birth" name="birth" value="${baby?.birth}" years="${2005..2010}"></g:datePicker>
                    </div>

                    <div class="gender radio">
                      <label>宝宝性别</label>
                      <fieldset class="sub">
                        <div class="option boy clear">
                          <input name="gender" id="boy" value="1" checked="checked" type="radio">
                          <label for="boy">男孩</label>
                        </div>
                        <div class="option girl clear">
                          <input name="gender" id="girl" value="2" type="radio">
                          <label for="girl">女孩</label>
                        </div>
                      </fieldset>
                    </div>
                    <div class="continue submit">
                      <input name="stage" value="20000" type="hidden"/>
                      <input value="提交 »" tabindex="4" type="submit" class="btnGrey">
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </fieldset>
          </g:form>
        </div>
      </div>

    </div>
  </div>
</div>
<div class="yui-b">
  3333
</div>
</body>